<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>专栏管理</title>


    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" href="../static/elementui/theme-chalk/index.css"/>
    <script src="../static/elementui/index.js"></script>


    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="creation">

    <table  cellspacing="20" width="900px" >
        <tr>
            <td>专栏名称:</td>
            <td colspan="5" >
                <el-input style="width: 500px;" v-model="formData.specialName" placeholder="最多输入40个字"></el-input>
            </td>
        </tr>
        <tr>
            <td>类别：</td>
            <td colspan="5">
                <el-select style="width: 150px;" v-model="formData.fkProjectId">
                <el-option :label="p.projName" :value="index+1" v-for="(p,index) in pro" :key="index"></el-option>
                </el-select>
            </td>
        </tr>


        <tr>
            <td>主图：</td>
            <td colspan="5">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/ep/files/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="formData.imageUrl" :src="formData.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <template slot-scope="scope">
                    <img width="50px" height="50px" :src="formData.imageUrl"/>
                </template>


            </td>
        </tr>

        <tr>
            <td>简介:</td>
            <td colspan="5">
                <el-input type="textarea" :rows="4" placeholder="最多输入40个字" v-model="formData.entityDesc" style="width: 500px;">
                </el-input>
            </td>
        </tr>

            <td >视频：</td>
            <td colspan="5">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/ep/files/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess1"
                        :before-upload="beforeAvatarUpload1">
                    <img v-if="formData.detail" :src="formData.detail" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <template slot-scope="scope" >
                    <img width="50px" height="50px" :src="formData.detail"/>
                </template>
            </td>
        </tr>

        <tr>
            <td>价格：</td>
            <td colspan="5">
                <el-input placeholder="元" style="width: 150px;" v-model="formData.price"></el-input>
            </td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <el-button type="primary" @click="addCol()">保存</el-button>
            </td>
            <td>
                <el-button type="primary" @click="resetForm()">重置</el-button>
            </td>
        </tr>
    </table>
</div>
</body>

<script>
    let creation = new Vue({
        el: "#creation",
        data: {
            //添加表单的数据
            formData: {
                specialName: "",
                fkProjectId: "",
                entityDesc: "",
                price: "",
                imageUrl: "",
                detail:"",
            },

            /*项目数据*/
            pro: [],
            /* 视频地址 */
            tableData: [{
                address: '',
            }],
        },
        methods: {

            /**/
            handleAvatarSuccess(res, file) {
                console.info(res);
                this.formData.imageUrl = res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /**/
            /**/
            handleAvatarSuccess1(res, file) {
                console.info(res);
                this.formData.detail = res;
            },
            beforeAvatarUpload1(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /**/

            /*保存*/
            addCol: function () {
                    axios.get("[[@{/special/addCol}]]", {

                        params: {
                            specialName: this.formData.specialName,
                            fkProjectId: this.formData.fkProjectId,
                            masterDrawing: this.formData.imageUrl,
                            descr: this.formData.entityDesc,
                            price: this.formData.price,
                        },
                    }).then(function (res) {
                        console.info(res)
                        console.info(res.data)
                    });
                this.formData = {};
            },
            /* 重置 */
            resetForm() {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
            },
            // 上移
            up(index) {
                let previousSbiling = this.tableData[index - 1]
                this.tableData.splice(index - 1, 1)
                this.tableData.splice(index, 0, previousSbiling)
            },
            // 添加
            add() {
                this.tableData.push({
                    address: '',
                })
            },
            // 下移
            down(index) {
                let target = this.tableData[index]
                this.tableData.splice(index, 1)
                this.tableData.splice(index + 1, 0, target)
            },
            // 删除
            deleteItem(index) {
                if (index - 1 >= 0) {
                    this.tableData.splice(index, 1)
                }
            },
        },
        mounted() {
            axios.get("[[@{/special/getPro}]]")
                .then(res => { //此处一定要用 箭头函数  不然this 就不是this
                    console.info(res)
                    console.info(res.data.data)
                    this.pro = res.data.data
                });
        },
    });
</script>
</html>
